<template>
    <div>
        <div class="input-body" @click.stop="inpClick">
            <i :class="iconInp=='down' ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
            <div class="tag-body">
                <el-tag v-for="(t,i) in tagList" :key="i" closable :disable-transitions="false" @close="handleClose(t)"
                    effect="plain">{{t.label}}
                </el-tag>
            </div>
        </div>
        <div class="checkbox-body">
            <div class="t_up">
            </div>
            <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item,index) in tagList" :key="index" size="medium" :label="item.label"></el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                iconInp: 'down',
                eInput: '',
                checkList: [],
                tagList: [{
                    label: '标签1',
                    value: '1'
                }, {
                    label: '标签2',
                    value: '2'
                }, {
                    label: '标签3',
                    value: '3'
                }, {
                    label: '标签4',
                    value: '4'
                }, {
                    label: '标签5',
                    value: '5'
                }, {
                    label: '标签6',
                    value: '6'
                }]
            }
        },
        methods: {
            inpClick() {
                this.iconInp = (this.iconInp == 'up' ? 'down' : 'up')
            },
            handleClose(tag) {
                let list = this.tagList
                list.splice(list.findIndex(f => f.label == tag.label), 1);
            },
        }
    }
</script>

<style lang="scss" scoped="scoped">
    .input-body {
        position: relative;
        width: 100%;
        // height: 30px;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;

        &:hover {
            border-color: #409eff;
        }

        >i {
            position: absolute;
            right: 10px;
            top: 8px;
            font-size: 14px;
        }

        .tag-body {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .el-tag {
                margin: 4px 6px;
            }
        }
    }

    .checkbox-body {
        padding: 15px;
        position: relative;
        height: 200px;
        width: 100%;
        margin-top: 20px;
        background-color: #FFFFFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        &:before {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
            position: absolute;
            top: -10px;
            left: 50%;
        }
    }
</style>
